<template>
    <div>
        <el-button type="primary" class="add_btn" icon="el-icon-plus" size="small" @click="showCreateDialogForm">
            新增角色
        </el-button>
        <div class="search_box">
            <el-form :inline="true" :model="formSearch">
                <el-form-item label="角色">
                    <el-input size="small" v-model="formSearch.roleId"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" icon="el-icon-search" size="small" type="primary" plain>查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table_content">
            <el-table
                    size="small"
                    border
                    ref="multipleTable"
                    :data="tableList"
                    tooltip-effect="dark"
                    v-loading="searchLoading"
                    style="width: 100%"
                    :header-cell-style="{backgroundColor:'#fafafa',fontSize:'15px',color:'#333333'}"
                    :cell-style="{fontSize:'15px'}"
            >
                <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        fixed="left"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="name"
                        min-width="120"
                        align="center"
                        label="角色名">
                </el-table-column>
                <el-table-column
                        prop="description"
                        min-width="120"
                        align="center"
                        label="描述">
                </el-table-column>
                <el-table-column
                        prop="accountNumber"
                        min-width="120"
                        align="center"
                        label="账号数量">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        min-width="120"
                        show-overflow-tooltip
                        align="center"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="220"
                        align="center"
                        show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button @click="showRoleDetail(scope.row)" size="mini">查看</el-button>
                        <el-button @click="showUpdateDialogForm(scope.row)" type="primary" size="mini">编辑</el-button>
                        <el-button @click="showDeleteDialogForm(scope.row)" type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination_box">
                <div class="pagination_box_content">
                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page="formSearch.pageNum"
                            layout="total, sizes, prev, pager, next, jumper"
                            :page-size="formSearch.pageSize"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <AddRole width="40%" title="新增角色" :dialogFormVisible="createDialogFormVisible"
                 :hideDialog="hideCreateDialogForm"
                 :submit="addRole"
                 :loading="addRoleLoading" :error="error"/>
        <UpdateRole width="40%" title="修改角色" :dialogFormVisible="updateDialogFormVisible"
                    :hideDialog="hideUpdateDialogForm"
                    :submit="updateRole" :updateItem="updateItem"
                    :loading="updateRoleLoading" :error="error"/>
        <RoleDetail :detailData="detailData" :visible="roleDetailShow"
                    :hideDialog="hideRoleDetail"></RoleDetail>
        <el-dialog
                title="提示"
                :visible.sync="deleteDialogShow"
                :close-on-click-modal="false"
                width="400px"
                center>
            <div class="icon_question">?</div>
            <span>您选择了1条数据记录是否确认删除?</span>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteDialogShow=false;deleteRow = {}">取 消</el-button>
                    <el-button type="primary" @click="deleteRole">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>
<script>
    import AutoSelectForm from '@/components/common/AutoSelectForm'
    import service from '@/api/service'
    import AddRole from './container/role/AddRole'
    import UpdateRole from './container/role/UpdateRole'
    import RoleDetail from './container/role/RoleDetail'

    export default {
        name: 'role',
        data() {
            return {
                formSearch: {
                    roleId: '',
                    pageNum: 1,
                    pageSize: 10
                },
                total: 0,
                pages: 0,
                tableList: [],
                error: false,
                createDialogFormVisible: false,
                addRoleLoading: false,
                updateDialogFormVisible: false,
                updateRoleLoading: false,
                updateItem: {},
                roleDetailShow: false,
                detailData: {},
                searchLoading: false,
                deleteDialogShow: false,
                deleteRow: {}
            }
        },
        methods: {
            async onSubmit() {
                this.formSearch.pageNum = 1
                let formData = {
                    roleId: this.formSearch.roleId,
                    pageNum: 1,
                    pageSize: this.formSearch.pageSize
                }
                this.searchLoading = true
                const res = await service.searchRoles(formData)
                this.searchLoading = false
                if (res.status < 400) {
                    this.formSearch.pageNum = res.res.pageNum
                    this.formSearch.pageSize = res.res.pageSize
                    this.total = res.res.total
                    this.pages = res.res.pages
                    this.tableList = res.res.result || []
                }
            },
            selectCb(data) {
                this.formSearch[data.fieldName] = data.value
            },
            //分页
            handleCurrentChange(pageNum) {
                this.formSearch.pageNum = pageNum
                this.searchCommon()
            },
            async searchCommon() {
                let formData = {
                    roleId: this.formSearch.roleId,
                    pageNum: this.formSearch.pageNum,
                    pageSize: this.formSearch.pageSize,
                }
                this.searchLoading = true
                const res = await service.searchRoles(formData)
                this.searchLoading = false
                if (res.status < 400) {
                    this.formSearch.pageNum = res.res.pageNum
                    this.formSearch.pageSize = res.res.pageSize
                    this.total = res.res.total
                    this.pages = res.res.pages
                    this.tableList = res.res.result || []
                }
            },
            //新增
            showCreateDialogForm() {
                this.createDialogFormVisible = true
            },
            hideCreateDialogForm() {
                this.createDialogFormVisible = false
                this.error = false
            },
            async addRole(data) {
                this.addRoleLoading = true
                const res = await service.addRole(data);
                this.addRoleLoading = false
                if (res.status < 400) {
                    this.createDialogFormVisible = false
                    this.error = false
                } else {
                    this.error = true
                }
            },
            getCheckedPermissions(list) {
                let arr = []
                let map = (l) => {
                    l.forEach(item => {
                        if (item.subMenus && item.subMenus.length !== 0) {
                            map(item.subMenus)
                        } else if (item.permissions && item.permissions.length !== 0) {
                            item.permissions.forEach(c => {
                                if (c.have && c.method) {
                                    arr.push(c.id)
                                }
                            })
                        }
                        return
                    })
                }
                map(list)
                return arr
            },
            //修改
            showUpdateDialogForm(row) {
                this.updateDialogFormVisible = true
                this.$nextTick(async function () {
                    const res = await service.getPermissionsByRole({
                        roleId: row.id
                    })
                    if (res.status < 400) {
                        this.updateItem = {
                            ...row,
                            permissionIds: this.getCheckedPermissions(res.res)
                        }
                        console.log(res.res, this.getCheckedPermissions(res.res))
                    }
                })
            },
            hideUpdateDialogForm() {
                this.updateDialogFormVisible = false
                this.error = false
                this.updateItem = {}
            },
            async updateRole(data) {
                this.updateRoleLoading = true
                const res = await service.updateRole(data);
                this.updateRoleLoading = false
                if (res.status < 400) {
                    this.tableList = this.tableList.map(item => {
                        if (item.id === data.id) {
                            return Object.assign({}, item, data)
                        }
                        return item
                    })
                    this.updateDialogFormVisible = false
                    this.error = false
                } else {
                    this.error = true
                }
            },
            //查看详情
            showRoleDetail(row) {
                this.roleDetailShow = true
                this.detailData = row
            },
            hideRoleDetail() {
                this.roleDetailShow = false
                this.detailData = {}
            },
            //删除
            showDeleteDialogForm(row) {
                this.deleteRow = row
                this.deleteDialogShow = true
            },
            async deleteRole() {
                const res = await service.deleteRole({
                    id: this.deleteRow.id
                });
                if (res.status < 400) {
                    this.tableList = this.tableList.filter(item => {
                        return item.id !== this.deleteRow.id
                    })
                    this.deleteDialogShow = false
                    this.deleteRow = {}
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        duration: 3000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: '删除失败',
                        duration: 3000
                    });
                }
            }
        },
        created() {
            this.searchCommon()
        },
        components: {
            AutoSelectForm,
            AddRole,
            UpdateRole,
            RoleDetail
        }
    }
</script>
<style scoped lang="stylus">
</style>
